<template>
  <div class="block-form bg-white">
    <div class="content pd-l br">
      <textarea type="text" placeholder="请输入作业内容" :focus="isFocus"
        show-confirm-bar="false"
        style="width: 100%;" v-model.lazy="contentBlock.value" @focus="onFocus"/>
    </div>
    <div class="pdh-l">
      <div v-for="(n, i) in audioBlocks" :key="i" class="weui-flex pdv v-middle">
        <div class="weui-flex__item"><audio-player :path="n.key" :duration="n.meta.duration"></audio-player></div>
        <div style="padding-left: 10px;">
          <a @tap.stop="onDelAudioBlockItem(i)"><i class="fi icon-del"></i></a>
        </div>
      </div>
    </div>
    <div class="media-bar bd-t pdv pdh-l ta-r weui-flex v-mdl c-primary">
      <div class="weui-flex__item pdr-s"><span class="fs-l" style="position: relative;top: 4px;">录制声音</span></div>
      <div>
        <audio-record @start="setEx" @status-change="onRecordStatusChange"  @ok="onRecordStop"></audio-record>
      </div>
    </div>
  </div>
</template>

<script>
import { genCmptNo } from '@/utils/helper'
import AudioRecord from '@/components/audio-record'
import AudioPlayer from '@/components/audio-player'

export default {
  props: {
    focus: {
      type: Boolean,
      default: false
    },
    rightOptEnable: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    AudioRecord,
    AudioPlayer
  },
  data() {
    return {
      isFocus: false,
      loops: 0,
      contentBlock: {
        id: '',
        type: 'text',
        value: ''
      },
      audioBlocks: []
    }
  },
  watch: {
    'contentBlock.value'(nv) {
      this.contentBlock.value = nv
      this.outputValue()
    },
    focus(nv) {
      if (!nv) return
      this.isFocus = true
    },
    value(nv) {
      this.initContentBlock()
      this.initAudioBlocks()
    }
  },
  methods: {
    onRecordStatusChange(status) {
      this.$emit('record-status-change', status)
    },
    onFocus() {
      this.$emit('content-focus')
    },
    onDelAudioBlockItem(idx) {
      let t = []
      this.audioBlocks.forEach((n, i) => {
        if (i === idx) return
        t.push(n)
      })
      this.audioBlocks = t
    },
    onRightOpt() {
      if (!this.rightOptEnable) return
      this.$emit('right-click')
    },
    onContentChange(e) {},
    outputValue() {
      let blocks = this.getBlocks()
      this.$emit('input', blocks)
    },
    initContentBlock() {
      let block = {
        id: genCmptNo(0),
        type: 'text',
        value: ''
      }
      this.value.forEach(n => {
        if (n.type === 'text') block = n
      })
      this.contentBlock = block
    },
    initAudioBlocks() {
      let blocks = []
      this.value.forEach(n => {
        if (n.type === 'audio') blocks.push(n)
      })
      this.audioBlocks = blocks
    },
    getBlocks() {
      let t = []
      t.push(this.contentBlock)
      t = t.concat(this.audioBlocks)
      return t
    },
    onRecordStop(res) {
      this.audioBlocks.push({
        id: genCmptNo(res.id),
        type: 'audio',
        mid: res.id,
        size: res.size,
        duration: res.meta.duration,
        key: res.key
      })
      this.outputValue()
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
textarea {
  height: 120px;
}
.block-form {
  .content {
    position: relative;
    padding-bottom: 0;
  }
}
.media-bar {
  height: 36px;
  overflow: hidden;
  i {
    font-size: 4 * @baseSize;
  }
}
</style>
